<template>
  <div class="settingsView">
    <my-header name-page="Settings" />
    <div class="settingsView__block">
      <p class="label" @click="changeApiKeys">> Сменить ApiKeys</p>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/UI/MyHeader.vue";

export default {
  name: "SettingsPage",
  components: { MyHeader },
  methods: {
    changeApiKeys() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.settingsView {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.settingsView__block {
  margin-top: 10%;
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.label {
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
  font-size: 17px;
  margin-top: 10%;
  text-decoration: var(--tg-theme-text-color);
  text-decoration-line: underline;
}

.label:active {
  color: var(--tg-theme-link-color);
  transform: scale(0.9);
}
</style>
